import { Typography, styled } from '@mui/material'
import SentimentVeryDissatisfiedIcon from '@mui/icons-material/SentimentVeryDissatisfied'
import { Link } from 'react-router-dom'

const StyledContainer = styled('div')(() => ({
	display: 'flex',
	marginBottom: '10px',
	width: '100%',
	minHeight: 'calc(100vh - 299px)',
	alignItems: 'center',
	justifyContent: 'center',
	flexDirection: 'column',
}))

const Page404 = () => (
	<StyledContainer>
		<Typography>Что-то пошло не так!</Typography>
		<SentimentVeryDissatisfiedIcon />
		<Link to={'/'}>Перейти на главную страницу</Link>
	</StyledContainer>
)

export default Page404
